<template>
    <div class="main">
        <div class="title">
            <span>.</span>热点推荐
        </div>
        <div v-if="latestArtcile == []">
            <div v-for="i in 3" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 100px">
                </el-skeleton>
            </div>
        </div>
        <div class="allArticle">
            <div v-for="(item, index) in latestArtcile" :key="item.id">
                <router-link :to="{ query: { id: item.id } }">
                    <el-image style="width: 100%; height: 150px;margin-bottom: 5px;" :src="item.face" :fit="fit"
                        v-if="index == 0">
                        <template #placeholder>
                            <el-image src="https://www.sucaijishi.com/uploadfile/2018/0919/20180919030733948.gif"
                                v-if="index == 0" :fit="fit" style="width: 100%; height: 150px;margin-bottom: 5px;" />
                        </template>
                    </el-image>
                    <div>
                        {{ item.title }}
                    </div>
                </router-link>
                <el-divider />
            </div>
        </div>
        <div class="title">
            <span>.</span>相关资讯
        </div>
        <div class="allArticle">
            <div v-if="!relatedArtcile">
                <div v-for="i in 5" :key="i">
                    <el-skeleton style="--el-skeleton-circle-size: 100px">
                    </el-skeleton>
                </div>
            </div>
            <div v-for="(item, index) in relatedArtcile" :key="item.id">
                <router-link :to="{ query: { id: item.id } }">
                    <el-image style="width: 100%; height: 150px;margin-bottom: 5px;" :src="item.face" :fit="fit"
                        v-if="index == 0" />
                    <template #placeholder>
                        <el-image src="https://www.sucaijishi.com/uploadfile/2018/0919/20180919030733948.gif"
                            v-if="index == 0" :fit="fit" style="width: 100%; height: 150px;margin-bottom: 5px;" />
                    </template>
                    <div>
                        {{ item.title }}
                    </div>
                </router-link>
                <el-divider />
            </div>
        </div>
    </div>
</template>

<script>
import router from '@/router';
import $ from 'jquery';
import { ref, watch } from 'vue';
export default {
    name: "slideArticleComponents",
    props: {
        tag: {
            type: String,
        },
        id: {
            type: Number,
        },
    },
    setup(props) {
        let latestArtcile = ref();
        let relatedArtcile = ref();
        let tag = ref(props.tag);
        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/articleGet/getLatestArtciele/",
                data: {
                    id: props.id,
                },
                success(resp) {
                    latestArtcile.value = resp;
                }
            })
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/articleGet/getRelatedArticle/",
                data: {
                    tag: tag.value,
                    id: props.id,
                },
                success(resp) {
                    relatedArtcile.value = resp;
                }
            })
        }
        getInfo();
        let jump = (i) => {
            router.push({ query: { id: i } });
        }
        watch(latestArtcile, () => {
            console.log(latestArtcile.value + "DSADASDASASDASD");

        })
        return {
            jump,
            latestArtcile,
            relatedArtcile,
        }
    }
}

</script>

<style scoped>
.main {
    height: auto;
    margin-bottom: 30px;
}

span {
    color: rgb(214, 0, 28);
    background: rgb(214, 0, 28);
    width: 5px;
    border-radius: 19px;
    margin-right: 5px;
}

.title {
    margin-bottom: 5px;
}

.el-divider--horizontal {
    margin: 15px 0;
}

a {
    text-decoration: none;
    color: rgb(64, 64, 64);
    font-size: 15px;
    font-weight: 300;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a:hover {
    color: red;
}

image :hover {
    cursor: pointer;
}
</style>